<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>首页</title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
	</head>
	<body>
		<!-- ctrl+/  不管你写的是html还是php 都是一样按ctrl+/ -->
		<!-- 网页的最大宽度 -->
		<div class="box">
			<div class="header">
				<div class="logo">
					<img src="images/logo.jpg">
				</div>
				<!-- 这是我们导航和登录的 -->
				<div class="box-right">
					<!-- 登录的 -->
					<div class="login">
						<ul>
							<li><a href="">登录</a></li>
							<li><a href="">注册</a></li>
							<li>
								<select name="">
									<option value="">旗下网站</option>
								</select>
							</li>
						</ul>
					</div>
					<div class="nav">
						<ul>
							<li><a href="">了解文豆</a></li>
							<li><a href="">案例展示</a></li>
							<li><a href="">服务介绍</a></li>
							<li><a href="">资讯中心</a></li>
							<li><a href="">联系我们</a></li>
							<li><a href="">合作伙伴</a></li>
						</ul>
					</div>
				</div>

			</div>
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<img src="images/banner.jpg">
					</div>
					<div class="swiper-slide">
						<img src="images/banner.jpg">
					</div>
					<div class="swiper-slide">
						<img src="images/banner.jpg">
					</div>
				</div>
				<!-- 如果需要分页器 -->
				<div class="swiper-pagination"></div>

				<!-- 如果需要导航按钮 -->
				<div class="swiper-button-prev"></div>
				<div class="swiper-button-next"></div>

				<!-- 如果需要滚动条 -->
				<!-- <div class="swiper-scrollbar"></div> -->
			</div>
			<div class="box2">
				<!-- 左边的 -->
				<div class="box-left">
					<div class="service">
						<div class="service-item">
							<img src="images/service_01.jpg">
							<p>移动端应用开发解决方案</p>
						</div>
						<div class="service-item">
							<img src="images/service_02.jpg">
							<p>高品质网站解决方案</p>
						</div>
						<div class="service-item">
							<img src="images/service_03.jpg">
							<p>电子商务平台解决方案</p>
						</div>
						<div class="service-item">
							<img src="images/service_04.jpg">
							<p>微信应用解决方案</p>
						</div>
						<div class="service-item">
							<img src="images/service_05.jpg">
							<p>PHP网站开发人才培养服务</p>
						</div>
						<div class="service-item">
							<img src="images/service_06.jpg">
							<p>企业信息化解决方案</p>
						</div>
					</div>
					<div class="clear"></div>
					<div class="text">
						<div class="title">
							电子商务方案
						</div>
						<p class="type">电子商务,B2B,B2C,C2C,O2O</p>
						<p class="txt">
							基于多年网络营销和自身在电子商务运营的基础上形成的解决方案。 电子商务（E-COMMERCE）：从广义上说，是指以电子设备为媒介进行的商务活动；从狭义上说，是指以计算机网络为基础所进
						</p>
					</div>
				</div>
				<div class="box-right">
					<div class="title">
						资讯中心
					</div>
					<div class="more">
						<img src="images/more.png">
					</div>
					<div class="clear"></div>
					<div class="list">
						<ul>
							<li><a href="">Ghost 博客中文版0.5.5正式发布<span>2020-12-16</span></a></li>
							<li><a href="">10款提高iOS开发效率的XCode插件<span>2020-12-16</span></a></li>
							<li><a href="">ONES-PHP开源企业管理软件<span>2020-12-16</span></a></li>
							<li><a href="">PHP系统设计与云架构<span>2020-12-16</span></a></li>
							<li><a href="">帮助你克服新手程序员最怕的事情<span>2020-12-16</span></a></li>
							<li><a href="">使用虚拟化来做PHP开发让你更专业<span>2020-12-16</span></a></li>
							<li><a href="">推荐给程序员的6款bootstrap模板<span>2020-12-16</span></a></li>
							<li><a href="">网页设计中的“点、线、面<span>2020-12-16</span></a></li>
							<li><a href="">百度站长学院：如何防止网站内部搜索被他人恶<span>2020-12-16</span></a></li>
							<li><a href="">2014年全球网站设计的15个趋势<span>2020-12-16</span></a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="clear"></div>
			<div class="cases">
				<div class="case-title">
					<img src="images/index_25.jpg">
					<div class="cases-more">
						<a href="">
							<img src="images/more.png">
						</a>
					</div>
				</div>
				<div class="cases-banner">
					<div class="cases-item">
						<a href="">
							<img src="images/case_01.gif">
						</a>
					</div>
					<div class="cases-item">
						<a href="">
							<img src="images/index_30.gif">
						</a>
					</div>
					<div class="cases-item">
						<a href="">
							<img src="images/index_32.jpg">
						</a>
					</div>
				</div>
				<div class="cases-left">
					<img src="images/images/images/index_33_24.jpg">
				</div>
				<div class="cases-right">
					<img src="images/images/index_21.jpg">
				</div>
				<div class="clear"></div>
			</div>
			<div class="box3">
				<div class="box3-text">


					<div class="text1">
						<div class="title1">
							为什么选择文豆
						</div>
						<p class="txt"><span class="span">文豆集团</span>是一家提供互联网服务的高科技集团公司，集策划、设计、前端优化、研发、测试、系统运维、网站推广、运营、团队外包及互联网人才培养为一体的成熟业务体系；
							主要提供高品质网站建设方案，移动端应用开发方案，微应用、微商城、微官网、微互动营销解决方案，企业信息化解决方案，以及PHP网站开发、Java开发、UI设计、淘宝美工人才培养服务，人才外包服务，高端IT人才猎头服务。</p>
						<div class="dianji1">
							<a href=""><img src="images/images/images/index_03.jpg"></a>
						</div>
					</div>
					<div class="text2">
						<div class="title2">
							服务特色
						</div>
						<div class="left">
							<img src="images/images/images/images/index_44_03.jpg">
						</div>
						<div class="right">
							<p class="type1">网站建设</p>
							<p class="txt1">文豆集团是一家具有独立注册商标的网络科技公司。</p>
							<p class="type2">营销推广</p>
							<p class="txt1">网络推广就是利用互联网进行宣传推广活动 。被推广对象可以是企业、产品、政府以及个人 的信息和网站等。据09年调查显示，中国93% 的企业.</p>
						<div class="dianji2">
							<a href=""><img src="images/images/images/index_03.jpg"></a>
						</div>
						</div>
						
						
					</div>
					<div class="text3">
						<div class="title3">
							联系我们
						</div>
						<div class="left">
							<img src="images/dianhua.jpg">
						</div>
						<div class="right">
							<p>广州：400-889-7654</p>
							<p>深圳：400-889-8076</p>
						</div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="footer-foot">
				<div class="hr"></div>
				<div class="footer">
					<ul>
						<li><a href="">了解文豆</a></li>
						<li><a href="">案例展示</a></li>
						<li><a href="">服务介绍</a></li>
						<li><a href="">资讯中心</a></li>
						<li><a href="">联系我们</a></li>
						<li><a href="">合作伙伴</a></li>
					</ul>
				</div>
				<div class="hr1"></div>
				<div class="footer-test">
				
				<div class="footer-text">
					<ul>
						<li>文豆集团 Copyright 2009-2015 All Rights Reserved wengdo <span class="span1">粤ICP备12022584号－3</span></li>
						<li>法律顾问：广东晟晨律师事务所－张勇律师</li>
					</ul>
				</div>
				<div class="fenxiang">
					<div class="span2">
						分享到：
					</div>
					<div class="img">
						<a href=""><img src="images/images/index_22.jpg" ></a>
						<a href=""><img src="images/index_23.jpg" ></a>
						<a href=""><img src="images/images/index_24.jpg" ></a>
					</div>
				</div>
				</div>
				</div>
			</div>
		</div>
	</body>
	<script src="js/swiper.min.js"></script>
	<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
	<script>
		var mySwiper = new Swiper('.swiper-container', {
			direction: 'horizontal',
			loop: true,
			autoplay: true,

			// 如果需要分页器
			pagination: {
				el: '.swiper-pagination',
			},
			// 如果需要前进后退按钮
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},

			// 如果需要滚动条
			// scrollbar: '.swiper-scrollbar',
		})
	</script>
</html>